<template>
    <div class="top-div">
        <div class="bread-info">
            <i class="el-icon-s-fold icon" v-show="!isCollapse" @click="$store.dispatch('changeShow', true)"></i>
            <i class="el-icon-s-unfold icon" v-show="isCollapse" @click="$store.dispatch('changeShow', false)"></i>
            <el-breadcrumb separator="/" class="">
                <transition-group name="breadcrumb">
                    <el-breadcrumb-item v-for="item, index in breadList" :key="index">
                        <router-link :to="item.path">{{ item.meta.title }}</router-link>
                    </el-breadcrumb-item>
                </transition-group>
            </el-breadcrumb>
        </div>

        <div class="user-info">
            <el-dropdown @command="handleCommand">
                <span class="el-dropdown-link">
                    <el-avatar :size="30" :src="userInfo.avatar"></el-avatar>
                    <span class="username">{{ userInfo.name }}</span>
                    <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="a">个人信息</el-dropdown-item>
                    <el-dropdown-item command="b">退出登录</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
</template>

<script>
export default {
    name: "nav-top",
    data() {
        return {
            breadList: null
        }
    },
    mounted() {
        this.getBreadcrumb()
    },
    watch: {
        // 监听路由
        '$route': function (to, from) {
            this.getBreadcrumb()
        }
    },
    methods: {
        handleCommand(command) {
            if (command == 'a') { }
            else if (command == 'b') this.logout()
        },
        // 退出登录
        async logout() {
            let res = await this.$store.dispatch('logout')
            // this.$router.push('/login')
        },
        // 改变面包屑
        getBreadcrumb() {
            let menu = this.$route.matched.filter(item => item.name)
            const first = menu[0]
            if (first && first.name !== 'home') {
                menu = [{ path: '/index/dashboard', meta: { title: '首页' } }].concat(menu)
            }
            this.breadList = menu
        }
    },
    computed: {
        isCollapse() {
            return this.$store.state.menu.isCollapse;
        },
        userInfo() {
            return this.$store.state.user.userInfo;
        }
    }
}
</script>

<style scoped>
.top-div {
    display: flex;
    height: 60px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ebeef5;
}

.el-dropdown-link {
    display: flex;
    align-items: center;
}

.user-info {
    cursor: pointer;
}

.username {
    margin-left: 5px;
    margin-right: 5px;
    font-size: 1rem;
}

.bread-info {
    display: flex;
    align-items: center;
}

.bread-info .icon {
    cursor: pointer;
    margin-right: 15px;
    font-size: 20px;
    color: #606266;
}
</style>